<template>
	<view class="cateList">
		<van-tabs :active="active" @click="switchTab">
			<van-tab :title="item.name" v-for="(item, index) in tabList.navData" :key="item.id">
				<ul>
					<li v-for="(it, idx) in list" :key="it.id" @click="goDetail(it.id)">
						<img :src="it.list_pic_url" alt="" />
						<p>{{ it.name }}</p>
						<p class="price">￥{{ it.retail_price }}</p>
					</li>
				</ul>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				tabList: [],
				list: []
			};
		},
		onLoad(o) {
			this.getTabList();
			this.getList(o.id);
			if (o.id == '1005000') {
				this.active = 0;
			} else if (o.id == '1005001') {
				this.active = 1;
			} else if (o.id == '1005002') {
				this.active = 4;
			} else if (o.id == '1008000') {
				this.active = 3;
			} else if (o.id == '1019000') {
				this.active = 8;
			}
		},
		watch: {
			// active(val) {
			//  console.log(val);
			// }
		},
		methods: {
			async getTabList(id) {
				let {
					data: res
				} = await this.$http.get('http://shop.bufantec.com/bufan/category/categoryNav?id=1005000');
				this.tabList = res;
			},
			async getList(id) {
				let {
					data: res
				} = await this.$http.get('http://shop.bufantec.com/bufan/goods/goodsList?categoryId=' + id);
				this.list = res.data;
			},
			goDetail(id) {
				wx.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			switchTab(e) {
				let index = e.detail.index;
				let id = this.tabList.navData[index].id;
				this.getList(id);
			}
		}
	};
</script>

<style lang="scss">
	ul {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		li {
			width: 49%;
			height: 400rpx;
			// background: #ccc;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			img {
				width: 100%;
				height: 80%;
			}

			p {
				font-size: 28rpx;
			}

			.price {
				color: orange;
			}
		}
	}
</style>
